<template>
  <!-- 实名注册页 -->
  <div class="realName">
    <div class="form_box">
      <!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
      <u--form labelPosition="left" :model="model1" :rules="rules" ref="form1">
        <div
          class="modele1"
          style="background: white; width: 100%; padding: 0px 10px"
        >
          <!-- 实名信息 -->
          <div class="cell1">
            <u--image
              :showLoading="true"
              :src="src"
              width="15px"
              height="22px"
            ></u--image>
            <u--text text="实名信息"></u--text>
          </div>
          <!-- 姓名 -->
          <u-form-item
            label="姓名 ："
            prop="name"
            borderBottom
            ref="item1"
            leftIcon="*"
            labelWidth="100px"
            :leftIconStyle="{ color: 'red' }"
          >
            <u--input
              v-model="model1.name"
              border="none"
              placeholder="请输入姓名"
            ></u--input>
          </u-form-item>
          <!-- 曾用名 -->
          <u-form-item borderBottom ref="item1">
            <template slot="label">
              <div :style="{ marginLeft: '10px', width: '90px' }">
                曾用名 ：
              </div>
            </template>
            <u--input
              v-model="model1.beforeName"
              border="none"
              placeholder="请输入曾用名"
            ></u--input>
          </u-form-item>
          <!-- 证件号码 -->
          <u-form-item
            label="证件号码 ："
            prop="idCard"
            borderBottom
            ref="item1"
            leftIcon="*"
            labelWidth="100px"
            :leftIconStyle="{ color: 'red' }"
          >
            <u--input
              v-model="model1.idCard"
              border="none"
              placeholder="请输入证件号码"
            ></u--input>
          </u-form-item>
          <!-- 民族 -->
          <u-form-item
            label="民族 ："
            prop="nation"
            borderBottom
            ref="item1"
            leftIcon="*"
            labelWidth="100px"
            :leftIconStyle="{ color: 'red' }"
          >
            <u--input
              v-model="model1.nation"
              border="none"
              placeholder="请输入民族"
            ></u--input>
          </u-form-item>
          <!-- 籍贯 -->
          <u-form-item
            label="籍贯 ："
            prop="nativePlace"
            borderBottom
            ref="item1"
            leftIcon="*"
            labelWidth="100px"
            :leftIconStyle="{ color: 'red' }"
          >
            <u--input
              v-model="model1.nativePlace"
              border="none"
              placeholder="请输入籍贯"
            ></u--input>
          </u-form-item>
          <!-- 政治面貌 -->
          <u-form-item borderBottom ref="item1">
            <template slot="label">
              <div :style="{ marginLeft: '10px', width: '90px' }">
                政治面貌 ：
              </div>
            </template>
            <u--input
              v-model="model1.political"
              border="none"
              placeholder="请输入政治面貌"
            ></u--input>
          </u-form-item>
        </div>
        <div
          class="modele1"
          style="
            background: white;
            width: 100%;
            padding: 0px 10px;
            margin-top: 10px;
          "
        >
          <!-- 联系方式 -->
          <div class="cell1">
            <u--image
              :showLoading="true"
              :src="src"
              width="15px"
              height="22px"
            ></u--image>
            <u--text text="联系方式"></u--text>
          </div>
          <!-- 手机 -->
          <u-form-item
            label="手机 ："
            prop="telephone"
            borderBottom
            ref="item1"
            leftIcon="*"
            labelWidth="100px"
            :leftIconStyle="{ color: 'red' }"
          >
            <u--input
              v-model="model1.telephone"
              border="none"
              placeholder="请输入手机"
            ></u--input>
          </u-form-item>
          <!-- 邮箱 -->
          <u-form-item borderBottom ref="item1">
            <template slot="label">
              <div :style="{ marginLeft: '10px', width: '90px' }">邮箱 ：</div>
            </template>
            <u--input
              v-model="model1.email"
              border="none"
              placeholder="请输入邮箱"
            ></u--input>
          </u-form-item>
          <!-- 微信号 -->
          <u-form-item borderBottom ref="item1">
            <template slot="label">
              <div :style="{ marginLeft: '10px', width: '90px' }">
                微信号 ：
              </div>
            </template>
            <u--input
              v-model="model1.wechat"
              border="none"
              placeholder="请输入微信号"
            ></u--input>
          </u-form-item>
          <!-- 居住地 -->
          <u-form-item
            label="居住地 ："
            prop="address"
            borderBottom
            ref="item1"
            leftIcon="*"
            labelWidth="100px"
            :leftIconStyle="{ color: 'red' }"
          >
            <u--input
              v-model="model1.address"
              border="none"
              placeholder="请输入居住地"
            ></u--input>
          </u-form-item>
        </div>
        <div
          class="modele1"
          style="
            background: white;
            width: 100%;
            padding: 0px 10px;
            margin-top: 10px;
          "
        >
          <!-- 是否自愿 -->
          <div class="cell_join">
            <u--text
              text="是否自愿加入都高人校友会"
              prefixIcon="*"
              :iconStyle="{ marginRight: '5px', color: 'red' }"
            ></u--text>
            <div class="">
              <u-radio-group v-model="radiovalue1" placement="row">
                <u-radio
                  :customStyle="{ marginRight: '8px' }"
                  v-for="(item, index) in radiolist1"
                  :key="index"
                  :label="item.name"
                  :name="item.name"
                  @change="radioChange"
                >
                </u-radio>
              </u-radio-group>
            </div>
          </div>
        </div>
      </u--form>
    </div>
    <!-- 按钮区 -->
    <div class="btn_box">
      <button class="btn" type="primary" @click="formSubmit">注册</button>
      <div style="display: flex; align-items: center">
        <u-checkbox-group placement="column">
          <u-checkbox
            :customStyle="{ margin: '8px 0px' }"
            :name="checkedBtn.value"
            :checked="checkedBtn.checked"
            @change="checkboxChange"
          >
          </u-checkbox>
        </u-checkbox-group>
        <div @click="goDeal" style="font-size: 14px">
          同意《”都高人“校友平台软件许可及服务协议》
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      src: require("@/static/index/shuxian.png"),
      model1: {
        name: "", //姓名
        beforeName: "", //曾用名
        idCard: "", //身份证
        nation: "", //民族
        nativePlace: "", //籍贯
        political: "", //政治面貌
        telephone: "", //手机
        email: "", //邮箱
        wechat: "", //微信号
        address: "", //省市区
        // address2: "", //详细地址
        joinAlumniOrg: 1, //是否自愿
        agreement: 0, //服务协议
      },

      rules: {
        //表单校验
        name: {
          type: "string",
          required: true,
          message: "请填写姓名",
          trigger: ["blur", "change"],
        },
        idCard: {
          type: "number",
          required: true,
          message: "请填写证件号码",
          trigger: ["blur", "change"],
        },
        nation: {
          type: "string",
          required: true,
          message: "请填写民族",
          trigger: ["blur", "change"],
        },
        nativePlace: {
          type: "string",
          required: true,
          message: "请填写籍贯",
          trigger: ["blur", "change"],
        },
        telephone: {
          type: "number",
          required: true,
          message: "请填写手机号",
          trigger: ["blur", "change"],
        },
        address: {
          type: "string",
          required: true,
          message: "请填写居住地",
          trigger: ["blur", "change"],
        },
      },

      radio: "",
      switchVal: false,
      //是否自愿单选框
      radiolist1: [
        {
          name: "是",
          disabled: false,
        },
        {
          name: "否",
          disabled: false,
        },
      ],
      // u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
      radiovalue1: "是",
      //协议勾选框
      checkedBtn: {
        name: "同意《”都高人“校友平台软件许可及服务协议》",
        value: 0,
        disabled: true,
        checked: false,
        id: 0,
      },
    };
  },
  onShow: function () {
    const pages = getCurrentPages();
    const currPage = pages[pages.length - 1];
    console.log(currPage.data.data1 || "", "飒飒");
  },
  onload(e) {
    console.log(e);
  },
  methods: {
    //是否自愿单选框
    radioChange(n) {
      if (n == "否") {
        this.model1.joinAlumniOrg = 0;
      } else {
        this.model1.joinAlumniOrg = 1;
      }
      console.log("radioChange", this.model1.joinAlumniOrg);
    },
    //协议选择框
    checkboxChange(detail) {
      if (detail) {
        this.model1.agreement = 1;
      } else {
        this.model1.agreement = 0;
      }
      console.log("change2", this.model1.agreement);
    },
    //点击跳转协议页
    goDeal(n) {
      if (this.checkedBtn.disabled) {
        uni.navigateTo({
          url: `/pages/login/readDeal?flag=${this.checkedBtn.disabled}`,
        });
      } else {
        return;
      }
    },
    toast(title) {
      uni.showToast({
        title: title,
        duration: 2000,
        icon: "none",
      });
    },
    //表单提交
    formSubmit() {
      if (this.model1.agreement == 0) {
        uni.showToast({
          title: "请阅读服务协议！",
          duration: 2000,
          icon: "none",
        });
        return;
      }

      this.$refs.form1
        .validate()
        .then((res) => {
          this.$apis.register(this.model1).then((res1) => {
            console.log(res1, this.model1, "wqwqw");
            if (res1.success) {
              uni.showToast({
                title: res1.message,
                duration: 2000,
                success: () => {
                  setTimeout(() => {
                    uni.reLaunch({
                      url: `/pages/alumniCertificate/alumniCertificate`,
                    });
                  }, 600);
                },
              });
            } else {
              uni.showToast({
                title: res1.message,
                icon: "none",
                duration: 1000,
              });
            }
          });
        })
        .catch((errors) => {
          uni.$u.toast("请完成表单！");
          console.log(this.model1, "222e2e");
        });
    },
  },
  onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.form1.setRules(this.rules);
  },
};
</script>
<style lang="scss" scoped>
.realName {
  // 表单
  .form_box {
    box-sizing: border-box;
    background: #eef2fb;
    .cell1 {
      padding: 10px 0px;
      display: flex;
      border-bottom: 1px solid #e8e9ea;
      box-sizing: border-box;
    }
    .cell_join {
      padding: 10px 0;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      padding-right: 15px;
      align-items: center;
    }
  }
  // 按钮区
  .btn_box {
    padding: 10px;
    box-sizing: border-box;

    .btn {
      background: #1990ff;
      color: white;
      border-radius: 10px;
    }
  }
}
</style>